<template>
	<view class="collections-container">
		<view class="">
			<ol>
				<li>
					<view class="ol-col-title">
						<text @click="choseFood = ''" :class="{active: !choseFood}">所有食材</text>
						<text v-for="item in collectionsData" :key="item._id" :class="{ active: item._id == choseFood }"
							@click="choseFood=item._id">{{ item.name }}</text>
					</view>
				</li>
				<li v-for="(item,surfaceIndex) in foodListData" :key="item._id">
					<template v-for="(food,index) in item.ingredient" :key="index">
						<view class="ol-col-item" v-if="surfaceIndex==0 && index<4">
							<text>{{ food.name }}</text>
							<text>{{ food.number }}</text>
						</view>
						<view class="ol-col-item" v-else v-show="isShow">
							<text>{{ food.name }}</text>
							<text>{{ food.number }}</text>
						</view>
					</template>
				</li>
				<li>
					<view class="open-list flex-ct">
						<text @click="openList()">{{ isShow?'收起':'全部展开'}}</text>
						<image src="/static/mengbanzu 282.png" mode=""></image>
					</view>
				</li>
			</ol>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch
	} from 'vue';
	import {
		getCollectionsApi
	} from '../../api/mine';

	const collectionsData = ref([]);
	const choseFood = ref('');
	const foodListData = ref([]);
	const isShow = ref(false)
	onMounted(() => {
		getCollections();
	});
	watch(choseFood, () => {
		if (choseFood.value) {
			foodListData.value = collectionsData.value.filter(item => choseFood.value == item._id);
		} else {
			foodListData.value = collectionsData.value;
		}

	})




	function getCollections() {
		getCollectionsApi({
			_id: '6512820a4700cfe4ef3ac850'
		}).then(res => {
			if (res.code == 200) {
				collectionsData.value = res.data;
				foodListData.value = collectionsData.value;
			}
		})
	};

	function openList() {
		isShow.value = !isShow.value;
	}
</script>

<style scoped lang="scss">
	.collections-container {
		padding: 0 34rpx;
		background-color: #ffffff;
	}

	.ol-col-title {
		font-size: 22rpx;
		color: #5a5a5a;

		text {
			margin-right: 38rpx;
		}
	}

	.ol-col-item,
	.ol-col-title {
		height: 66rpx;
		border-bottom: 1px solid #f1f1f1;

		text {
			line-height: 66rpx;
		}
	}

	.ol-col-item {
		font-size: 28rpx;
		color: #686868;
	}

	.ol-col-item>text:first-child {
		display: inline-block;
		width: 430rpx;
	}

	.open-list {
		text {
			font-size: 22rpx;
			color: #5a5a5a;
			line-height: 58rpx;
			margin-right: 10rpx;
		}

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.active {
		font-size: 28rpx;
		color: #d86f32;
	}
</style>